<template>
  <view class="wrap">
    <view class="healthWrap">
      <view class="listWrap" v-if="state.healthList.bmi">
        <view class="header">
          <icon type="" class="iconfont icon-BMIluru1 left" style="color: #4bddbe"></icon>
          <view class="right">
            <view class="top cf">
              <text class="name">BMI</text>
              <!-- green    yellow   red   orange  -->
              <text
                v-if="state.healthList && state.healthList.bmi && state.healthList.bmi.normalFlag"
                :class="['status', state.healthList.bmi.color ? state.healthList.bmi.color : 'red']"
                >{{ state.healthList.bmi.normalFlagName }}</text
              >
              <text class="time">{{
                state.healthList.bmi.collectTime
                  ? transformTimeTwo(
                      new Date(state.healthList.bmi.collectTime.replace(/\-/g, '/')).getTime(),
                      'minutesdd'
                    ).replace(/\//g, '-')
                  : ''
              }}</text>
            </view>
            <view class="min">
              <view class="num">
                <text class="name" v-if="state.healthList.bmi.itemValue">{{
                  state.healthList.bmi.itemValue
                }}</text>
                <text class="nodata" v-else>-</text>
                <text class="unit" v-if="state.healthList.bmi.itemValue">kg/㎡</text>
              </view>
              <!-- <view class="unit">mmHg</view> -->
              <icon type="" @tap="add('BMI')" class="iconfont icon-zengjia-11 add"></icon>
            </view>
          </view>
        </view>
        <view class="checkMore">
          <view class="item" @tap="knowFun('BMI')">
            <text class="name">了解</text>
            <text class="quota">BMI</text>
            <img class="img" src="@/static/image/hmm/4-1.png" alt="" />
            <text class="border"></text>
          </view>
          <view class="item" @tap="detailFun('BMI')">
            <text class="name">查看详情</text>
            <img class="img" src="@/static/image/hmm/4-1.png" alt="" />
          </view>
        </view>
      </view>
      <view class="listWrap" v-if="state.healthList.whr">
        <view class="header">
          <icon type="" class="iconfont icon-yaotunbiluru1 left" style="color: #857bff"></icon>
          <view class="right">
            <view class="top cf">
              <text class="name">腰臀比</text>
              <text
                v-if="state.healthList && state.healthList.whr && state.healthList.whr.normalFlag"
                :class="['status', state.healthList.whr.color ? state.healthList.whr.color : 'red']"
                >{{ state.healthList.whr.normalFlagName }}</text
              >
              <text class="time">
                {{
                  state.healthList.whr.collectTime
                    ? transformTimeTwo(
                        new Date(state.healthList.whr.collectTime.replace(/\-/g, '/')).getTime(),
                        'minutesdd'
                      ).replace(/\//g, '-')
                    : ''
                }}
              </text>
            </view>
            <view class="min">
              <view class="num">
                <text class="name" v-if="state.healthList.whr.itemValue">{{
                  state.healthList.whr.itemValue
                }}</text>
                <text class="nodata" v-else>-</text>
              </view>
              <icon type="" @tap="add('whr')" class="iconfont icon-zengjia-11 add"></icon>
            </view>
          </view>
        </view>
        <view class="checkMore">
          <view class="item" @tap="knowFun('whr')">
            <text class="name">了解</text>
            <text class="quota">腰臀比</text>
            <img class="img" src="@/static/image/hmm/4-1.png" alt="" />
            <text class="border"></text>
          </view>
          <view class="item" @tap="detailFun('whr')">
            <text class="name">查看详情</text>
            <img class="img" src="@/static/image/hmm/4-1.png" alt="" />
          </view>
        </view>
      </view>
      <view class="listWrap" v-if="state.healthList.dbp">
        <view class="header">
          <icon type="" class="iconfont icon-xieyaluru1 left" style="color: #ffa24d"></icon>
          <view class="right">
            <view class="top cf">
              <text class="name">血压</text>
              <text
                v-if="state.healthList && state.healthList.sbp && state.healthList.sbp.normalFlag"
                :class="[
                  'status',
                  state.healthList.sbp.normalFlag == 'N' && state.healthList.dbp.normalFlag == 'N'
                    ? 'green'
                    : 'red'
                ]"
                >{{
                  state.healthList.sbp.normalFlag == 'N' && state.healthList.dbp.normalFlag == 'N'
                    ? '正常'
                    : state.healthList.sbp.normalFlag == null &&
                      state.healthList.dbp.normalFlag == null
                    ? ''
                    : '异常'
                }}</text
              >
              <text class="time">
                {{
                  state.healthList.sbp.collectTime
                    ? transformTimeTwo(
                        new Date(state.healthList.sbp.collectTime.replace(/\-/g, '/')).getTime(),
                        'minutesdd'
                      ).replace(/\//g, '-')
                    : ''
                }}
              </text>
            </view>
            <view class="min">
              <view class="num">
                <text
                  class="nodata"
                  v-if="!state.healthList.sbp.itemValue && !state.healthList.dbp.itemValue"
                  >-</text
                >
                <text class="name" v-else
                  >{{ Math.round(Number(state.healthList.sbp.itemValue)) }} /
                  {{ Math.round(Number(state.healthList.dbp.itemValue)) }}</text
                >
                <text
                  class="unit"
                  v-if="state.healthList.sbp.itemValue || state.healthList.dbp.itemValue"
                  >mmHg</text
                >
              </view>
              <icon
                type=""
                @tap="add('blood_pressure')"
                class="iconfont icon-zengjia-11 add"
              ></icon>
            </view>
          </view>
        </view>
        <view class="checkMore">
          <view class="item" @tap="knowFun('blood_pressure')">
            <text class="name">了解</text>
            <text class="quota">血压</text>
            <img class="img" src="@/static/image/hmm/4-1.png" alt="" />
            <text class="border"></text>
          </view>
          <view class="item" @tap="detailFun('blood_pressure')">
            <text class="name">查看详情</text>
            <img class="img" src="@/static/image/hmm/4-1.png" alt="" />
          </view>
        </view>
      </view>
      <view class="listWrap" v-if="state.healthList.heartRate">
        <view class="header">
          <icon type="" class="iconfont icon-xinshuailuru1 left" style="color: #5383fe"></icon>
          <view class="right">
            <view class="top cf">
              <text class="name">心率</text>
              <text
                v-if="
                  state.healthList &&
                  state.healthList.heartRate &&
                  state.healthList.heartRate.normalFlag
                "
                :class="[
                  'status',
                  state.healthList.heartRate.color ? state.healthList.heartRate.color : 'red'
                ]"
                >{{ state.healthList.heartRate.normalFlagName }}</text
              >
              <text class="time">
                {{
                  state.healthList.heartRate.collectTime
                    ? transformTimeTwo(
                        new Date(
                          state.healthList.heartRate.collectTime.replace(/\-/g, '/')
                        ).getTime(),
                        'minutesdd'
                      ).replace(/\//g, '-')
                    : ''
                }}
              </text>
            </view>
            <view class="min">
              <view class="num">
                <text class="name" v-if="state.healthList.heartRate.itemValue">{{
                  Math.round(Number(state.healthList.heartRate.itemValue))
                }}</text>
                <text class="nodata" v-else>-</text>
                <text class="unit" v-if="state.healthList.heartRate.itemValue">次/分</text>
              </view>
              <icon type="" @tap="add('heart')" class="iconfont icon-zengjia-11 add"></icon>
            </view>
          </view>
        </view>
        <view class="checkMore">
          <view class="item" @tap="knowFun('heart')">
            <text class="name">了解</text>
            <text class="quota">心率</text>
            <img class="img" src="@/static/image/hmm/4-1.png" alt="" />
            <text class="border"></text>
          </view>
          <view class="item" @tap="detailFun('heart')">
            <text class="name">查看详情</text>
            <img class="img" src="@/static/image/hmm/4-1.png" alt="" />
          </view>
        </view>
      </view>
      <view class="listWrap" v-if="state.healthList.fbg">
        <view class="header">
          <icon type="" class="iconfont icon-xietangluru1 left" style="color: #ff766d"></icon>
          <view class="right">
            <view class="top cf">
              <text class="name">血糖</text>
              <text
                v-if="state.healthList && state.healthList.fbg && state.healthList.fbg.normalFlag"
                :class="['status', state.healthList.fbg.color ? state.healthList.fbg.color : 'red']"
                >{{ state.healthList.fbg.normalFlagName }}</text
              >
              <text class="time">
                {{
                  state.healthList.fbg.collectTime
                    ? transformTimeTwo(
                        new Date(state.healthList.fbg.collectTime.replace(/\-/g, '/')).getTime(),
                        'minutesdd'
                      ).replace(/\//g, '-')
                    : ''
                }}
              </text>
            </view>
            <view class="min">
              <view class="num">
                <text class="name" v-if="state.healthList.fbg.itemValue">
                  {{ state.healthList.fbg.itemValue ? state.healthList.fbg.itemValue : '-' }}
                </text>
                <text class="nodata" v-else>-</text>
                <text class="unit" v-if="state.healthList.fbg.itemValue">mmol/L</text>
                <text class="postprandial" v-if="state.healthList.fbg.itemValue">{{
                  state.healthList.fbg.itemValue ? '空腹' : ''
                }}</text>
              </view>
              <icon type="" @tap="add('blood_sugar')" class="iconfont icon-zengjia-11 add"></icon>
            </view>
          </view>
        </view>
        <view class="checkMore">
          <view class="item" @tap="knowFun('blood_sugar')">
            <text class="name">了解</text>
            <text class="quota">血糖</text>
            <img class="img" src="@/static/image/hmm/4-1.png" alt="" />
            <text class="border"></text>
          </view>
          <view class="item" @tap="detailFun('blood_sugar')">
            <text class="name">查看详情</text>
            <img class="img" src="@/static/image/hmm/4-1.png" alt="" />
          </view>
        </view>
      </view>
      <view class="listWrap" v-if="state.healthList.pbg">
        <view class="header">
          <icon type="" class="iconfont icon-xietangluru1 left" style="color: #ff766d"></icon>
          <view class="right">
            <view class="top cf">
              <text class="name">血糖</text>
              <text
                v-if="state.healthList && state.healthList.pbg && state.healthList.pbg.normalFlag"
                :class="['status', state.healthList.pbg.color ? state.healthList.pbg.color : 'red']"
                >{{ state.healthList.pbg.normalFlagName }}</text
              >
              <text class="time">
                {{
                  state.healthList.pbg.collectTime
                    ? transformTimeTwo(
                        new Date(state.healthList.pbg.collectTime.replace(/\-/g, '/')).getTime(),
                        'minutesdd'
                      ).replace(/\//g, '-')
                    : ''
                }}
              </text>
            </view>
            <view class="min">
              <view class="num">
                <text class="name" v-if="state.healthList.pbg.itemValue">{{
                  state.healthList.pbg.itemValue ? state.healthList.pbg.itemValue : '-'
                }}</text>
                <text class="nodata" v-else>-</text>
                <text class="unit" v-if="state.healthList.pbg.itemValue">mmol/L</text>
                <text class="postprandial" v-if="state.healthList.pbg.itemValue">{{
                  state.healthList.pbg.itemValue ? '餐后' : ''
                }}</text>
              </view>
              <icon type="" @tap="add('blood_sugar')" class="iconfont icon-zengjia-11 add"></icon>
            </view>
          </view>
        </view>
        <view class="checkMore">
          <view class="item" @tap="knowFun('blood_sugar')">
            <text class="name">了解</text>
            <text class="quota">血糖</text>
            <img class="img" src="@/static/image/hmm/4-1.png" alt="" />
            <text class="border"></text>
          </view>
          <view class="item" @tap="detailFun('blood_sugar')">
            <text class="name">查看详情</text>
            <img class="img" src="@/static/image/hmm/4-1.png" alt="" />
          </view>
        </view>
      </view>
      <view class="listWrap" v-if="state.healthList.spo2">
        <view class="header">
          <icon type="" class="iconfont icon-xieyangluru1 left" style="color: #41a4ff"></icon>
          <view class="right">
            <view class="top cf">
              <text class="name">血氧</text>
              <text
                v-if="state.healthList && state.healthList.spo2 && state.healthList.spo2.normalFlag"
                :class="[
                  'status',
                  state.healthList.spo2.color ? state.healthList.spo2.color : 'red'
                ]"
                >{{ state.healthList.spo2.normalFlagName }}</text
              >
              <text class="time">
                {{
                  state.healthList.spo2.collectTime
                    ? transformTimeTwo(
                        new Date(state.healthList.spo2.collectTime.replace(/\-/g, '/')).getTime(),
                        'minutesdd'
                      ).replace(/\//g, '-')
                    : ''
                }}
              </text>
            </view>
            <view class="min">
              <view class="num">
                <text class="name" v-if="state.healthList.spo2.itemValue">{{
                  state.healthList.spo2.itemValue
                }}</text>
                <text class="nodata" v-else>-</text>
                <text class="unit" v-if="state.healthList.spo2.itemValue">%</text>
              </view>
              <icon type="" @tap="add('blood_oxygen')" class="iconfont icon-zengjia-11 add"></icon>
            </view>
          </view>
        </view>
        <view class="checkMore">
          <view class="item" @tap="knowFun('blood_oxygen')">
            <text class="name">了解</text>
            <text class="quota">血氧</text>
            <img class="img" src="@/static/image/hmm/4-1.png" alt="" />
            <text class="border"></text>
          </view>
          <view class="item" @tap="detailFun('blood_oxygen')">
            <text class="name">查看详情</text>
            <img class="img" src="@/static/image/hmm/4-1.png" alt="" />
          </view>
        </view>
      </view>
    </view>
    <view @touchmove.stop.prevent="prevent">
      <up-popup
        :show="show"
        :closeable="true"
        mode="bottom"
        @close="close"
        :custom-style="{ 'max-height': '90vh', overflow: 'auto' }"
      >
        <view class="popup-wrap">
          <view class="title">
            {{
              state.checkRulesType == 'BMI'
                ? '身高体重录入'
                : state.checkRulesType == 'whr'
                ? '腰臀比录入'
                : state.checkRulesType == 'blood_pressure'
                ? '血压录入'
                : state.checkRulesType == 'heart'
                ? '心率录入'
                : state.checkRulesType == 'blood_sugar'
                ? '血糖录入'
                : state.checkRulesType == 'blood_oxygen'
                ? '血氧录入'
                : ''
            }}
          </view>
          <view class="tabKey">
            <text
              :class="[
                'name',
                state.checkRulesType == 'whr' ||
                state.checkRulesType == 'heart' ||
                state.checkRulesType == 'blood_oxygen'
                  ? 'on'
                  : ''
              ]"
              @tap="measurementFun"
              >{{
                state.checkRulesType == 'BMI'
                  ? '如何测量BMI？'
                  : state.checkRulesType == 'whr'
                  ? '如何测量腰臀比？'
                  : state.checkRulesType == 'blood_pressure'
                  ? '如何测量血压？'
                  : state.checkRulesType == 'blood_sugar'
                  ? '如何测量血糖？'
                  : '如何测量？'
              }}
            </text>
            <view v-if="state.tabkeyboardShow">
              <view class="keyboard" @tap="measuremenKey('keyboard')">
                <text type="" class="iconfont icon-jianpan1 img"></text>
                <text class="key">切换键盘</text>
              </view>
            </view>
            <view v-else>
              <view class="keyboard" @tap="measuremenKey('slideRule')">
                <text type="" class="iconfont icon-huachi1 img"></text>
                <text class="key">切换滑尺</text>
              </view>
            </view>
          </view>
          <view class="listWraps" v-if="state.checkRulesType == 'blood_sugar'">
            <view
              :class="['item', state.bloodSugarActive == index ? 'on' : '']"
              v-for="(item, index) in bloodSugarList"
              :key="index"
              @tap="bloodSugarTab(item, index)"
            >
              <text class="name">{{ item.name }}</text>
              <text class="name">{{ item.title }}</text>
            </view>
          </view>
          <view class="scoring" v-if="state.slideRuleShow">
            <slideRule
              v-if="
                state.checkRulesType == 'BMI' ||
                state.checkRulesType == 'whr' ||
                state.checkRulesType == 'blood_pressure' ||
                state.checkRulesType == 'heart' ||
                state.checkRulesType == 'blood_oxygen' ||
                state.checkRulesType == 'blood_sugar'
              "
              :message="message"
              @childEvent="childEvent"
            ></slideRule>
            <slideRule
              v-if="
                state.checkRulesType == 'BMI' ||
                state.checkRulesType == 'whr' ||
                state.checkRulesType == 'blood_pressure'
              "
              style="margin-top: 40rpx"
              :message="messageWeight"
              @childEvent="childEvent"
            ></slideRule>
            <slideRule
              v-if="state.checkRulesType == 'blood_pressure'"
              style="margin-top: 40rpx"
              :message="messageThree"
              @childEvent="childEvent"
            ></slideRule>
            <!-- <slideRuleBlood
              v-if="state.checkRulesType == 'blood_sugar'"
              :message="state.message"
              @childEvent="childEvent"
            ></slideRuleBlood> -->
          </view>
          <view class="measure" v-else>
            <view class="numWrap cf">
              <view
                class="item"
                v-if="
                  state.checkRulesType == 'BMI' ||
                  state.checkRulesType == 'whr' ||
                  state.checkRulesType == 'blood_pressure' ||
                  state.checkRulesType == 'heart' ||
                  state.checkRulesType == 'blood_sugar' ||
                  state.checkRulesType == 'blood_oxygen'
                "
              >
                <input
                  v-model="measurementValue.height"
                  class="value"
                  type="digit"
                  placeholder="--"
                  :maxlength="5"
                />
                <view class="wraps" v-if="state.checkRulesType == 'BMI'">
                  <text class="name">身高</text>
                  <text class="name">CM</text>
                </view>
                <view class="wraps" v-else-if="state.checkRulesType == 'whr'">
                  <text class="name">腰围</text>
                  <text class="name">CM</text>
                </view>
                <view class="wraps" v-else-if="state.checkRulesType == 'blood_pressure'">
                  <text class="name">收缩压</text>
                  <text class="name">mmHg</text>
                </view>
                <view class="wraps" v-else-if="state.checkRulesType == 'heart'">
                  <text class="name">心率</text>
                  <text class="name">次/分</text>
                </view>
                <view class="wraps" v-else-if="state.checkRulesType == 'blood_sugar'">
                  <text class="name">血糖</text>
                  <text class="name">mmol/L</text>
                </view>
                <view class="wraps" v-else-if="state.checkRulesType == 'blood_oxygen'">
                  <text class="name">血氧饱和度</text>
                  <text class="name">%</text>
                </view>
              </view>
              <view
                class="item"
                v-if="
                  state.checkRulesType == 'BMI' ||
                  state.checkRulesType == 'whr' ||
                  state.checkRulesType == 'blood_pressure'
                "
              >
                <input
                  v-model="measurementValue.weight"
                  class="value"
                  type="digit"
                  placeholder="--"
                  :maxlength="5"
                />
                <view class="wraps" v-if="state.checkRulesType == 'BMI'">
                  <text class="name">体重</text>
                  <text class="name">KG</text>
                </view>
                <view class="wraps" v-else-if="state.checkRulesType == 'whr'">
                  <text class="name">臀围</text>
                  <text class="name">CM</text>
                </view>
                <view class="wraps" v-else-if="state.checkRulesType == 'blood_pressure'">
                  <text class="name">舒张压</text>
                  <text class="name">mmHg</text>
                </view>
              </view>
              <view class="item" v-if="state.checkRulesType == 'blood_pressure'">
                <input
                  v-model="measurementValue.pulse"
                  class="value"
                  type="digit"
                  placeholder="--"
                  :maxlength="3"
                />
                <view class="wraps">
                  <text class="name">脉搏</text>
                  <text class="name">次/分</text>
                </view>
              </view>
            </view>
          </view>
          <view class="measureTime">
            <text class="name">测量时间</text>
            <view class="time" @tap="timeFun">
              <text class="titles">{{ state.time }}</text>
              <img class="img" src="@/static/image/hmm/4.png" alt="" />
            </view>
          </view>
          <view class="measureDetail">
            <text class="item"
              >最近测量时间：{{
                state.checkRulesType == 'BMI'
                  ? state.healthList.bmi.collectTime &&
                    transformTimeTwo(
                      new Date(state.healthList.bmi.collectTime.replace(/\-/g, '/')).getTime(),
                      'minutesdd'
                    ).replace(/\//g, '-')
                  : state.checkRulesType == 'whr'
                  ? state.healthList.whr.collectTime &&
                    transformTimeTwo(
                      new Date(state.healthList.whr.collectTime.replace(/\-/g, '/')).getTime(),
                      'minutesdd'
                    ).replace(/\//g, '-')
                  : state.checkRulesType == 'blood_pressure'
                  ? state.healthList.sbp.collectTime &&
                    transformTimeTwo(
                      new Date(state.healthList.sbp.collectTime.replace(/\-/g, '/')).getTime(),
                      'minutesdd'
                    ).replace(/\//g, '-')
                  : state.checkRulesType == 'heart'
                  ? state.healthList.heartRate.collectTime &&
                    transformTimeTwo(
                      new Date(
                        state.healthList.heartRate.collectTime.replace(/\-/g, '/')
                      ).getTime(),
                      'minutesdd'
                    ).replace(/\//g, '-')
                  : state.checkRulesType == 'blood_sugar' && state.healthList.fbg
                  ? state.healthList.fbg.collectTime &&
                    transformTimeTwo(
                      new Date(state.healthList.fbg.collectTime.replace(/\-/g, '/')).getTime(),
                      'minutesdd'
                    ).replace(/\//g, '-')
                  : state.checkRulesType == 'blood_sugar' && state.healthList.pbg
                  ? state.healthList.pbg.collectTime &&
                    transformTimeTwo(
                      new Date(state.healthList.pbg.collectTime.replace(/\-/g, '/')).getTime(),
                      'minutesdd'
                    ).replace(/\//g, '-')
                  : state.checkRulesType == 'blood_oxygen'
                  ? state.healthList.spo2.collectTime &&
                    transformTimeTwo(
                      new Date(state.healthList.spo2.collectTime.replace(/\-/g, '/')).getTime(),
                      'minutesdd'
                    ).replace(/\//g, '-')
                  : ''
              }}</text
            >
            <text class="item"
              >测量值：{{
                state.checkRulesType == 'BMI'
                  ? (state.healthList.bmi.itemValue || 0) + 'kg/㎡'
                  : state.checkRulesType == 'whr'
                  ? '腰围: ' +
                    (state.healthList.waist.itemValue || 0) +
                    'cm' +
                    ' 臀围: ' +
                    (state.healthList.hip.itemValue || 0) +
                    'cm' +
                    ' 腰臀比: ' +
                    (state.healthList.whr.itemValue || 0)
                  : state.checkRulesType == 'blood_pressure'
                  ? (state.healthList.sbp.itemValue || 0) +
                    ' / ' +
                    (state.healthList.dbp.itemValue || 0) +
                    ' mmHg'
                  : state.checkRulesType == 'heart'
                  ? (state.healthList.heartRate.itemValue || 0) + ' 次/分'
                  : state.checkRulesType == 'blood_sugar' && state.healthList.fbg
                  ? (state.healthList.fbg.itemValue || 0) + ' mmol/L'
                  : state.checkRulesType == 'blood_sugar' && state.healthList.pbg
                  ? (state.healthList.pbg.itemValue || 0) + ' mmol/L'
                  : state.checkRulesType == 'blood_oxygen'
                  ? (state.healthList.spo2.itemValue || 0) + ' %'
                  : ''
              }}
            </text>
          </view>
          <view class="fixedBtn" @tap="sure">
            <text class="name">提交</text>
          </view>
        </view>
      </up-popup>
    </view>
    <view @touchmove.stop.prevent="prevent">
      <up-popup
        :show="measurementShow"
        :closeable="true"
        mode="bottom"
        @close="goit"
        :custom-style="{
          'max-height': '90vh',
          overflow: 'auto'
        }"
      >
        <view class="popup-wrap">
          <view class="title">正确测量方法</view>
          <view class="content">
            <view class="contentWrap" v-if="state.checkRulesType == 'BMI'">
              <view class="contentItem"
                >1.将体脂称放置在坚固且平坦的地面上，测量过程请勿弯曲膝关节。</view
              >
              <img
                class="img"
                mode="widthFix"
                src="https://ainengli.hzjrsw.com/jkhx/BMI2.png"
                alt=""
              />
              <view class="contentItem">赤脚站立，并将脚心对准体脂称中间。</view>
              <img class="img" mode="widthFix" src="https://ainengli.hzjrsw.com/jkhx/BMI1.png" />
            </view>
            <view class="contentWrap" v-if="state.checkRulesType == 'blood_pressure'">
              <view class="contentItem">1.测量前30分钟不得进行剧烈运动。</view>
              <view class="contentItem">2.测量的时候，手臂要放松，放置在与心脏齐平的桌面上。</view>
              <img
                class="img"
                mode="widthFix"
                src="https://ainengli.hzjrsw.com/jkhx/bloodPressure.png"
              />
            </view>
            <view class="contentWrap" v-if="state.checkRulesType == 'blood_sugar'">
              <view class="contentItem">1.沿着箭头方向将试纸插入血糖仪。</view>
              <img
                class="img"
                mode="widthFix"
                src="https://ainengli.hzjrsw.com/jkhx/bloodSugar1.png"
              />
              <view class="contentItem">2.将血滴接触试纸窗口的前沿位置。</view>
              <img
                class="img"
                mode="widthFix"
                src="https://ainengli.hzjrsw.com/jkhx/bloodSugar2.png"
              />
            </view>
            <view class="fixedBtn" @tap="goit">
              <view class="name">知道了</view>
            </view>
          </view>
        </view>
      </up-popup>
    </view>
    <view @touchmove.stop.prevent="prevent">
      <up-datetime-picker
        :show="dateShow"
        v-model="state.datetime"
        :closeOnClickOverlay="true"
        :minDate="state.minDate"
        :maxDate="new Date().getTime()"
        mode="datetime"
        @close="closeDateTime"
        @confirm="confirmDateTime"
        @cancel="closeDateTime"
        @change="changeFun"
      ></up-datetime-picker>
    </view>
    <view @touchmove.stop.prevent="prevent">
      <up-popup :show="abnormalShow" :round="8" mode="center" @close="abnormalClose">
        <view class="abnormalContent">
          <view class="title"> 异常提醒 </view>
          <text class="content">
            {{
              state.checkRulesType == 'BMI'
                ? '您的BMI异常，请关注体重数据'
                : state.checkRulesType == 'whr'
                ? '您的腰臀比数据异常，请关注'
                : state.checkRulesType == 'blood_pressure'
                ? '您的血压异常，建议您增加监测次数并咨询医生'
                : state.checkRulesType == 'heart'
                ? '您的心率异常，建议您增加监测次数并咨询医生'
                : state.checkRulesType == 'blood_sugar'
                ? '您的血糖异常，建议您增加监测次数并咨询医生'
                : state.checkRulesType == 'blood_oxygen'
                ? '您的血氧异常，建议您增加监测次数并咨询医生'
                : ''
            }}
          </text>
          <view class="know" @tap="abnormalClose">知道了</view>
        </view>
      </up-popup>
    </view>
  </view>
</template>

<script setup lang="ts">
import { reactive, watch, ref } from 'vue'
import { healthInfoAll, healthInfoSave } from '@/api/hmm'
import { onShow } from '@dcloudio/uni-app'
import { transformTimeTwo } from '@/utils/hmm'
import slideRule from './components/slideRule'
const state = reactive({
  isClick: false,
  slideRuleType: '',
  slideRuleTypeDefault: false,
  showTest: false,
  userInfo: {},
  bloodSugarActive: 0,
  current: 60, //刻度指向的位置
  maxValue: 150,
  ruleType: 'cm',
  healthList: {},
  tabkeyboardShow: true,
  slideRuleShow: true,
  datetime: '',
  minDate: 0,
  time: '',
  datetimeNew: '',
  checkRulesType: '' //判断患病类型
})
const bloodSugarList = ref([
  {
    name: '早起',
    title: '空腹',
    id: 1
  },
  {
    name: '早餐后',
    title: '两小时',
    id: 2
  },
  {
    name: '午餐后',
    title: '两小时',
    id: 3
  },
  {
    name: '晚餐后',
    title: '两小时',
    id: 4
  }
])
const measurementShow = ref(false)
const show = ref(false)
const dateShow = ref(false)
const abnormalShow = ref(false)
// 测量
const message = ref({
  currentScore: 50,
  maxValue: 100,
  name: '',
  unit: ''
})
const messageWeight = ref({
  currentScore: 100,
  maxValue: 150,
  name: '',
  unit: ''
})
const messageThree = ref({
  currentScore: 100,
  maxValue: 150,
  name: '',
  unit: ''
})
const measurementValue = ref({
  height: 0, //身高
  weight: 0, //体重
  pulse: 0 //脉搏,
})
// watch(
//   () => measurementValue,
//   (newValue, oldValue) => {
//     console.log(newValue._value.height)
//     if (state.checkRulesType == 'heart') {
//       console.log(11)
//     }
//   },
//   {
//     immediate: true,
//     deep: true
//   }
// )
onShow(() => {
  state.userInfo = uni.getStorageSync('userInfo')
    ? JSON.parse(uni.getStorageSync('userInfo')).patientInfo
    : {}
  state.datetime = transformTimeTwo(new Date().getTime(), 'minutesdd')
  init()
  getMinTime()
})

const init = () => {
  uni.showLoading({
    title: '加载中'
  })
  let param = state.userInfo.empi
  healthInfoAll(param).then((res) => {
    uni.hideLoading()
    if (res.code == 0) {
      state.healthList = res.data
    } else {
      state.healthList = {}
    }
  })
}
const getMinTime = () => {
  let date = new Date()
  date.setFullYear(new Date().getFullYear())
  date.setMonth(0)
  date.setDate(1)
  date.setHours(0)
  date.setMinutes(0)
  state.minDate = date.getTime()
}
const prevent = () => {}
const add = (name) => {
  state.tabkeyboardShow = true
  state.slideRuleShow = true
  state.slideRuleType = ''
  state.slideRuleTypeDefault = false
  state.isClick = false
  state.time = transformTimeTwo(new Date().getTime(), 'minutesdd').replace(/\//g, '-')
  message.value.currentScore = 50
  message.value.maxValue = 100
  state.checkRulesType = ''
  message.value.name = ''
  setTimeout(() => {
    show.value = true
    state.checkRulesType = name
  }, 10)
  message.value.unit = ''
  messageWeight.value.currentScore = 100
  messageWeight.value.maxValue = 150
  messageWeight.value.name = ''
  messageWeight.value.unit = ''
  messageThree.value.currentScore = 100
  messageThree.value.maxValue = 150
  messageThree.value.name = ''
  messageThree.value.unit = ''
  measurementValue.value.height = 0
  measurementValue.value.weight = 0
  measurementValue.value.pulse = 0
  state.bloodSugarActive = 0
  if (name == 'BMI') {
    message.value.currentScore = state.healthList.height.itemValue
      ? Math.round(Number(state.healthList.height.itemValue))
      : 170
    measurementValue.value.height = state.healthList.height.itemValue
      ? Math.round(Number(state.healthList.height.itemValue))
      : 170
    message.value.maxValue = 250
    message.value.name = '身高'
    message.value.unit = 'cm'
    messageWeight.value.currentScore = state.healthList.weight.itemValue
      ? Math.round(Number(state.healthList.weight.itemValue))
      : 65
    measurementValue.value.weight = state.healthList.weight.itemValue
      ? Math.round(Number(state.healthList.weight.itemValue))
      : 65
    messageWeight.value.maxValue = 200
    messageWeight.value.name = '体重'
    messageWeight.value.unit = 'kg'
  } else if (name == 'whr') {
    message.value.currentScore = state.healthList.waist.itemValue
      ? Math.round(Number(state.healthList.waist.itemValue))
      : 85
    measurementValue.value.height = state.healthList.waist.itemValue
      ? Math.round(Number(state.healthList.waist.itemValue))
      : 85
    message.value.maxValue = 200
    message.value.name = '腰围'
    message.value.unit = 'cm'
    messageWeight.value.currentScore = state.healthList.hip.itemValue
      ? Math.round(Number(state.healthList.hip.itemValue))
      : 100
    measurementValue.value.weight = state.healthList.hip.itemValue
      ? Math.round(Number(state.healthList.hip.itemValue))
      : 100
    messageWeight.value.maxValue = 200
    messageWeight.value.name = '臀围'
    messageWeight.value.unit = 'cm'
  } else if (name == 'blood_pressure') {
    message.value.currentScore = state.healthList.sbp.itemValue
      ? Math.round(Number(state.healthList.sbp.itemValue))
      : 120
    measurementValue.value.height = state.healthList.sbp.itemValue
      ? Math.round(Number(state.healthList.sbp.itemValue))
      : 120
    message.value.maxValue = 300
    message.value.name = '收缩压'
    message.value.unit = 'mmHg'
    messageWeight.value.currentScore = state.healthList.dbp.itemValue
      ? Math.round(Number(state.healthList.dbp.itemValue))
      : 80
    measurementValue.value.weight = state.healthList.dbp.itemValue
      ? Math.round(Number(state.healthList.dbp.itemValue))
      : 80
    messageWeight.value.maxValue = 300
    messageWeight.value.name = '舒张压'
    messageWeight.value.unit = 'mmHg'
    messageThree.value.currentScore = state.healthList.pulseRate.itemValue
      ? Math.round(Number(state.healthList.pulseRate.itemValue))
      : 75
    measurementValue.value.pulse = state.healthList.pulseRate.itemValue
      ? Math.round(Number(state.healthList.pulseRate.itemValue))
      : 75
    messageThree.value.maxValue = 180
    messageThree.value.name = '脉搏'
    messageThree.value.unit = '次/分'
  } else if (name == 'heart') {
    message.value.currentScore = state.healthList.heartRate.itemValue
      ? Math.round(Number(state.healthList.heartRate.itemValue))
      : 75
    measurementValue.value.height = state.healthList.heartRate.itemValue
      ? Math.round(Number(state.healthList.heartRate.itemValue))
      : 75
    message.value.maxValue = 180
    message.value.name = '心率'
    message.value.unit = '次/分'
  } else if (name == 'blood_sugar') {
    if (state.healthList.pbg) {
      if (state.healthList.pbg.itemValue) {
        message.value.currentScore = state.healthList.pbg.itemValue
          ? Number(state.healthList.pbg.itemValue)
          : 5.5
        measurementValue.value.height = state.healthList.pbg.itemValue
          ? Number(state.healthList.pbg.itemValue)
          : 5.5
      } else {
        message.value.currentScore = 5.5
        measurementValue.value.height = 5.5
      }
    } else {
      if (state.healthList.fbg.itemValue) {
        message.value.currentScore = state.healthList.fbg.itemValue
          ? Number(state.healthList.fbg.itemValue)
          : 5.5
        measurementValue.value.height = state.healthList.fbg.itemValue
          ? Number(state.healthList.fbg.itemValue)
          : 5.5
      } else {
        message.value.currentScore = 5.5
        measurementValue.value.height = 5.5
      }
    }
    message.value.maxValue = 30
    message.value.name = '血糖'
    message.value.unit = 'mmol/L'
  } else if (name == 'blood_oxygen') {
    message.value.currentScore = state.healthList.spo2.itemValue
      ? Math.round(Number(state.healthList.spo2.itemValue))
      : 97
    measurementValue.value.height = state.healthList.spo2.itemValue
      ? Math.round(Number(state.healthList.spo2.itemValue))
      : 97
    message.value.maxValue = 100
    message.value.name = '血氧饱和度'
    message.value.unit = '%'
  }
}
const close = () => {
  show.value = false
}
const sure = () => {
  if (state.isClick == true) {
    return false
  }
  if (state.time == '') {
    uni.showToast({
      title: '请选择测量时间',
      icon: 'none'
    })
    return false
  }
  uni.showLoading({
    title: '加载中'
  })
  let param = {}
  if (state.checkRulesType == 'BMI') {
    let bmiDate = (
      (measurementValue.value.weight /
        measurementValue.value.height /
        measurementValue.value.height) *
      10000
    ).toFixed(2)
    param = {
      empi: state.userInfo.empi,
      bmi: bmiDate,
      height: measurementValue.value.height,
      weight: measurementValue.value.weight,
      collectTime: state.time + ':00',
      dataSource: '手动录入'
    }
  } else if (state.checkRulesType == 'whr') {
    let bmiDate = (measurementValue.value.height / measurementValue.value.weight).toFixed(2)
    param = {
      empi: state.userInfo.empi,
      whr: bmiDate,
      waist: measurementValue.value.height,
      hip: measurementValue.value.weight,
      collectTime: state.time + ':00',
      dataSource: '手动录入'
    }
  } else if (state.checkRulesType == 'blood_pressure') {
    param = {
      empi: state.userInfo.empi,
      sbp: measurementValue.value.height,
      dbp: measurementValue.value.weight,
      pulseRate: measurementValue.value.pulse,
      collectTime: state.time + ':00',
      dataSource: '手动录入'
    }
  } else if (state.checkRulesType == 'heart') {
    let reg = /^\+?[1-9][0-9]*$/
    if (reg.test(measurementValue.value.height + '')) {
      param = {
        empi: state.userInfo.empi,
        heartRate: measurementValue.value.height,
        collectTime: state.time + ':00',
        dataSource: '手动录入'
      }
    } else {
      uni.hideLoading()
      uni.showToast({
        title: '请输入正整数',
        icon: 'none'
      })
      return false
    }
  } else if (state.checkRulesType == 'blood_sugar') {
    param = {
      empi: state.userInfo.empi,
      collectTime: state.time + ':00',
      fbg: '',
      pbg: '',
      dataSource: '手动录入'
    }

    if (state.healthList.fbg) {
      if (state.bloodSugarActive == 0) {
        param.fbg = measurementValue.value.height
        param.pbg = ''
      } else {
        param.pbg = measurementValue.value.height
        param.fbg = ''
      }
    } else {
      if (state.bloodSugarActive == 0) {
        param.fbg = measurementValue.value.height
        param.pbg = ''
      } else {
        param.pbg = measurementValue.value.height
        param.fbg = ''
      }
    }
  } else if (state.checkRulesType == 'blood_oxygen') {
    param = {
      empi: state.userInfo.empi,
      spo2: Math.round(Number(measurementValue.value.height)),
      collectTime: state.time + ':00',
      dataSource: '手动录入'
    }
  }
  state.isClick = true
  healthInfoSave(param)
    .then((res) => {
      uni.hideLoading()
      if (res.code == 0) {
        if (res.data == 'true') {
          show.value = false
          abnormalShow.value = true
        } else {
          uni.showToast({
            title: '提交成功',
            icon: 'none',
            duration: 2000
          })
          setTimeout(() => {
            show.value = false
            init()
          }, 2000)
        }
      }
    })
    .catch((err) => {
      state.isClick = false
    })
}
const knowFun = (val: string) => {
  uni.navigateTo({
    url: '/packA/pages/healthPortrait/detail?type=' + val
  })
}
const detailFun = (name) => {
  uni.navigateTo({
    url: '/packA/pages/healthPortrait/healthDataRecord?type=' + name
  })
}
const timeFun = () => {
  show.value = false
  state.tabkeyboardShow = false
  dateShow.value = true
  state.datetime = state.time ? state.time.replace(/\-/g, '/') : ''
}
const closeDateTime = () => {
  show.value = true
  state.tabkeyboardShow = true
  if (state.slideRuleShow == true) {
    state.slideRuleShow = !state.slideRuleShow
    setTimeout(() => {
      state.slideRuleShow = !state.slideRuleShow
    }, 20)
  }
  dateShow.value = false
}
const confirmDateTime = () => {
  show.value = true
  dateShow.value = false
  if (state.slideRuleShow == true) {
    state.slideRuleShow = !state.slideRuleShow
    setTimeout(() => {
      state.slideRuleShow = !state.slideRuleShow
    }, 20)
  }
  if (state.datetimeNew) {
    state.time = state.datetimeNew.replace(/\//g, '-')
  } else {
    state.time = transformTimeTwo(new Date().getTime(), 'minutesdd').replace(/\//g, '-')
  }
}
const changeFun = (item) => {
  let data = transformTimeTwo(new Date(item.value).getTime(), 'minutesdd')
  state.datetimeNew = data
}
const measuremenKey = (value) => {
  state.tabkeyboardShow = !state.tabkeyboardShow
  state.slideRuleShow = !state.slideRuleShow
  state.slideRuleType = value
  state.slideRuleTypeDefault = true
  if (value == 'slideRule') {
    if (state.checkRulesType == 'BMI') {
      if (Number(measurementValue.value.height) <= 250) {
        message.value.currentScore = Math.round(Number(measurementValue.value.height))
        measurementValue.value.height = Math.round(Number(measurementValue.value.height))
      } else {
        message.value.currentScore = 250
        measurementValue.value.height = 250
      }
      if (Number(measurementValue.value.weight) <= 200) {
        messageWeight.value.currentScore = Math.round(Number(measurementValue.value.weight))
        measurementValue.value.weight = Math.round(Number(measurementValue.value.weight))
      } else {
        messageWeight.value.currentScore = 200
        measurementValue.value.weight = 200
      }
    } else if (state.checkRulesType == 'whr') {
      if (Number(measurementValue.value.height) <= 200) {
        message.value.currentScore = Math.round(Number(measurementValue.value.height))
        measurementValue.value.height = Math.round(Number(measurementValue.value.height))
      } else {
        message.value.currentScore = 200
        measurementValue.value.height = 200
      }
      if (Number(measurementValue.value.weight) <= 200) {
        messageWeight.value.currentScore = Math.round(Number(measurementValue.value.weight))
        measurementValue.value.weight = Math.round(Number(measurementValue.value.weight))
      } else {
        messageWeight.value.currentScore = 200
        measurementValue.value.weight = 200
      }
    } else if (state.checkRulesType == 'heart') {
      if (Number(measurementValue.value.height) <= 180) {
        message.value.currentScore = Math.round(Number(measurementValue.value.height))
        measurementValue.value.height = Math.round(Number(measurementValue.value.height))
      } else {
        message.value.currentScore = 180
        measurementValue.value.height = 180
      }
    } else if (state.checkRulesType == 'blood_pressure') {
      if (Number(measurementValue.value.height) <= 300) {
        message.value.currentScore = Math.round(Number(measurementValue.value.height))
        measurementValue.value.height = Math.round(Number(measurementValue.value.height))
      } else {
        message.value.currentScore = 300
        measurementValue.value.height = 300
      }
      if (Number(measurementValue.value.weight) <= 300) {
        messageWeight.value.currentScore = Number(measurementValue.value.weight)
        measurementValue.value.weight = Number(measurementValue.value.weight)
      } else {
        messageWeight.value.currentScore = 300
        measurementValue.value.weight = 300
      }
      if (Number(measurementValue.value.pulse) <= 180) {
        messageThree.value.currentScore = Number(measurementValue.value.pulse)
        measurementValue.value.pulse = Number(measurementValue.value.pulse)
      } else {
        messageThree.value.currentScore = 180
        measurementValue.value.pulse = 180
      }
    } else if (state.checkRulesType == 'blood_sugar') {
      if (Number(measurementValue.value.height) <= 30) {
        message.value.currentScore = Number(measurementValue.value.height)
        measurementValue.value.height = Number(measurementValue.value.height)
      } else {
        message.value.currentScore = 30
        measurementValue.value.height = 30
      }
    } else if (state.checkRulesType == 'blood_oxygen') {
      if (Number(measurementValue.value.height) <= 100) {
        message.value.currentScore = Math.round(Number(measurementValue.value.height))
        measurementValue.value.height = Math.round(Number(measurementValue.value.height))
      } else {
        message.value.currentScore = 100
        measurementValue.value.height = 100
      }
    }
  } else if (value == 'keyboard') {
    if (state.checkRulesType == 'blood_sugar') {
      if (Number(measurementValue.value.height) <= 30) {
        measurementValue.value.height = Number(measurementValue.value.height)
      } else {
        measurementValue.value.height = 30
      }
    }
  }
}
const measurementFun = () => {
  if (
    state.checkRulesType == 'BMI' ||
    state.checkRulesType == 'blood_pressure' ||
    state.checkRulesType == 'blood_sugar'
  ) {
    measurementShow.value = true
    show.value = false
  }
}
const goit = () => {
  measurementShow.value = false
  if (state.slideRuleShow == true) {
    state.slideRuleShow = !state.slideRuleShow
    setTimeout(() => {
      state.slideRuleShow = !state.slideRuleShow
    }, 20)
  }
  show.value = true
}
const bloodSugarTab = (item, index) => {
  state.bloodSugarActive = index
}
const childEvent = (param) => {
  if (
    param &&
    (param.name == '身高' || param.name == '腰围' || param.name == '收缩压' || param.name == '心率')
  ) {
    measurementValue.value.height = param.currentSwiper
    message.value.currentScore = param.currentSwiper
  } else if (param && (param.name == '体重' || param.name == '臀围' || param.name == '舒张压')) {
    measurementValue.value.weight = param.currentSwiper
    messageWeight.value.currentScore = param.currentSwiper
  } else if (param && param.name == '脉搏') {
    measurementValue.value.pulse = param.currentSwiper
    messageThree.value.currentScore = param.currentSwiper
  } else if (param && param.name == '血糖') {
    measurementValue.value.height = param.currentSwiper
    message.value.currentScore = param.currentSwiper
  } else if (param && param.name == '血氧饱和度') {
    measurementValue.value.height = param.currentSwiper
    message.value.currentScore = param.currentSwiper
  }
}
const abnormalClose = () => {
  abnormalShow.value = false
  init()
}
</script>

<style lang="scss" scoped>
.cf {
  zoom: 1;
}
.cf::after {
  display: block;
  height: 0;
  clear: both;
  font-size: 0;
  content: '.';
  visibility: hidden;
}
.wrap {
  min-height: 100vh;
  padding-bottom: 32rpx;
  .healthWrap {
    display: inline-block;
    margin: 0rpx 32rpx;
    width: calc(100% - 64rpx);
    height: 100%;
    overflow: auto;
    .listWrap {
      margin: 32rpx 0rpx 0;
      border-radius: 16rpx;
      background: #f5f5f5;
      overflow: hidden;
      .header {
        padding: 32rpx;
        background: #fff;
        border-bottom: 1rpx solid #e5e6eb;
        border-top-left-radius: 16rpx;
        border-top-right-radius: 16rpx;
        .left {
          display: inline-block;
          vertical-align: top;
          font-size: 96rpx;
        }
        .right {
          display: inline-block;
          vertical-align: top;
          width: calc(100% - 126rpx);
          margin-left: 30rpx;
          .top {
            font-size: 26rpx;
            color: #999;
            position: relative;
            .name {
              display: inline-block;
              vertical-align: middle;
              font-size: 32rpx;
              color: #333;
              font-weight: 700;
            }
            .status {
              display: inline-block;
              vertical-align: middle;
              margin-left: 20rpx;
              padding: 4rpx 20rpx;
              border-radius: 4rpx;
              font-weight: 700;
              color: #ff503d;
              background: rgba(255, 80, 61, 0.1);
              &.red {
                background: rgba(255, 80, 61, 0.1);
                color: #ff503d;
              }
              &.yellow {
                background: rgba(255, 214, 102, 0.1);
                color: #ffd666;
              }
              &.orange {
                background: rgba(255, 129, 60, 0.1);
                color: #ff813c;
              }
              &.green {
                background: rgba(12, 182, 124, 0.1);
                color: #0cb67c;
              }
            }
            .time {
              position: absolute;
              top: 50%;
              transform: translateY(-50%);
              right: 0;
            }
          }
          .min {
            margin-top: 24rpx;
            font-size: 28rpx;
            color: #999;
            position: relative;
            .num {
              display: inline-block;
              vertical-align: middle;
              .name {
                font-size: 40rpx;
                color: #222;
                font-weight: 700;
                margin-right: 20rpx;
              }
              .nodata {
                margin-right: 20rpx;
              }
              .postprandial {
                font-size: 24rpx;
                padding: 4rpx 20rpx;
                border-top-right-radius: 4rpx;
                border-bottom-right-radius: 20rpx;
                border-top-left-radius: 20rpx;
                border-bottom-left-radius: 4rpx;
                margin-left: 20rpx;
                background: #f5f5f5;
                color: #666;
              }
            }
            .add {
              position: absolute;
              top: 50%;
              transform: translateY(-50%);
              right: 0;
              font-size: 64rpx;
              color: #00d1b6;
              display: block;
            }
          }
          p {
            font-size: 26rpx;
            color: #999;
            position: relative;
            &:nth-child(1) {
              span {
                display: inline-block;
                vertical-align: middle;
                &:nth-child(1) {
                  font-size: 32rpx;
                  color: #333;
                  font-weight: 700;
                }
                &.status {
                  margin-left: 20rpx;
                  padding: 4rpx 20rpx;
                  color: #ff503d;
                  border-radius: 4rpx;
                  background: rgba(255, 80, 61, 0.1);
                  &.red {
                    background: rgba(255, 80, 61, 0.1);
                    color: #ff503d;
                  }
                  &.yellow {
                    background: rgba(255, 129, 60, 0.1);
                    color: #ff813c;
                  }
                  &.green {
                    background: rgba(12, 182, 124, 0.1);
                    color: #0cb67c;
                  }
                }
                &.postprandial {
                  font-size: 24rpx;
                  padding: 4rpx 20rpx;
                  border-top-right-radius: 4rpx;
                  border-bottom-right-radius: 20rpx;
                  border-top-left-radius: 20rpx;
                  border-bottom-left-radius: 4rpx;
                  margin-left: 20rpx;
                  background: #f5f5f5;
                }
                &.time {
                  position: absolute;
                  top: 50%;
                  transform: translateY(-50%);
                  right: 0;
                }
              }
            }
            &:nth-child(2) {
              margin-top: 30rpx;
              span {
                font-size: 28rpx;
                color: #999;
                display: inline-block;
                vertical-align: middle;
                &:nth-child(1) {
                  color: #333;
                  font-size: 40rpx;
                  margin-right: 20rpx;
                  &.no {
                    font-size: 26rpx;
                    color: #999;
                  }
                  i {
                    font-style: normal;
                  }
                }
                &.checkaBnormal {
                  font-size: 24rpx;
                  padding: 4rpx 20rpx;
                  border-radius: 4rpx;
                  margin-left: 20rpx;
                  border: 1rpx solid #ccc;
                  &.red {
                    background: rgba(255, 80, 61, 0.1);
                    border: 1rpx solid #ff503d;
                    color: #ff503d;
                  }
                  &.yellow {
                    background: rgba(255, 129, 60, 0.1);
                    border: 1rpx solid #ff813c;
                    color: #ff813c;
                  }
                  &.green {
                    background: rgba(12, 182, 124, 0.1);
                    border: 1rpx solid #0cb67c;
                    color: #0cb67c;
                  }
                }
                &.postprandial {
                  font-size: 24rpx;
                  padding: 4rpx 20rpx;
                  border-top-right-radius: 4rpx;
                  border-bottom-right-radius: 20rpx;
                  border-top-left-radius: 20rpx;
                  border-bottom-left-radius: 4rpx;
                  margin-left: 20rpx;
                  background: #f5f5f5;
                  color: #666;
                }
              }
              .addImg {
                position: absolute;
                top: 50%;
                transform: translateY(-50%);
                right: 0;
                width: 64rpx;
              }
            }
          }
        }
      }
      .checkMore {
        background: #fff;
        .item {
          display: inline-block;
          vertical-align: middle;
          width: 50%;
          text-align: center;
          position: relative;
          padding: 30rpx 0;
          font-size: 28rpx;
          color: #666;
          .name,
          .quota {
            display: inline-block;
            vertical-align: middle;
          }
          .img {
            display: inline-block;
            vertical-align: middle;
            width: 32rpx;
            height: 32rpx;
          }
          .border {
            position: absolute;
            right: 0;
            border-right: 1rpx solid #ccc;
            height: 32rpx;
          }
        }
      }
    }
  }
  ::v-deep .u-popup {
    .u-popup__content {
      overflow: hidden;
      .abnormalContent {
        width: 80vw;
        .title {
          padding: 40rpx 32rpx 0;
          text-align: center;
          font-size: 34rpx;
          color: #1d2129;
          font-weight: 700;
        }
        .content {
          display: block;
          padding: 15rpx 32rpx 40rpx;
          border-bottom: 2rpx solid #e5e6eb;
          font-size: 30rpx;
          color: #4e5969;
          text-align: center;
        }
        .know {
          height: 88rpx;
          line-height: 88rpx;
          text-align: center;
          font-size: 32rpx;
          color: #00d1b6;
        }
      }
    }
    .popup-wrap {
      padding-bottom: calc(160rpx + constant(safe-area-inset-bottom));
      padding-bottom: calc(160rpx + env(safe-area-inset-bottom));
      .title {
        padding: 32rpx 32rpx;
        text-align: center;
        font-weight: 700;
        font-size: 32rpx;
        border-bottom: 1rpx solid #e5e6eb;
      }
      .popupContent {
        padding: 32rpx;
        font-size: 30rpx;
        color: #222;
      }
      .tabKey {
        position: relative;
        padding: 20rpx 30rpx 30rpx;
        .name {
          font-weight: 700;
          color: #00d1b6;
          font-size: 30rpx;
          &.on {
            color: #fff;
          }
        }
        .keyboard {
          position: absolute;
          top: 50%;
          transform: translateY(-50%);
          right: 30rpx;
          .img {
            display: inline-block;
            vertical-align: middle;
            font-size: 36rpx;
            color: #999;
          }
          .key {
            display: inline-block;
            vertical-align: middle;
            font-size: 28rpx;
            color: #222;
            margin-left: 10rpx;
          }
        }
      }
      .listWraps {
        margin: 30rpx 30rpx 0;
        width: calc(100% - 60rpx);
        .item {
          width: 22%;
          display: inline-block;
          vertical-align: middle;
          background: #fafafa;
          margin-right: 4%;
          border-radius: 12rpx;
          padding: 20rpx 0;
          text-align: center;
          position: relative;
          &:nth-last-child(1) {
            margin-right: 0;
          }
          .name {
            font-size: 26rpx;
            color: #666;
            &:nth-child(1) {
              font-size: 28rpx;
              color: #333;
              font-weight: 700;
              display: block;
            }
          }
          &.on {
            background: #00d1b6;
            .name {
              color: #fff;
            }
            &::after {
              content: '';
              position: absolute;
              bottom: -8rpx;
              left: 50%;
              transform: translateX(-50%);
              width: 0;
              height: 0;
              border-top: 10rpx solid #00d1b6;
              border-right: 10rpx solid transparent;
              border-left: 10rpx solid transparent;
            }
          }
        }
      }
      .btn {
        margin: 0 32rpx;
        background: #00d1b6;
        height: 88rpx;
        line-height: 88rpx;
        border-radius: 44rpx;
        color: #fff;
        font-size: 32rpx;
        font-weight: 700;
        text-align: center;
      }
      .fixedBtn {
        background: #fff;
        border-top: 1rpx solid #e5e6eb;
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        padding: 24rpx 0;
        padding-bottom: calc(24rpx + constant(safe-area-inset-bottom));
        padding-bottom: calc(24rpx + env(safe-area-inset-bottom));
        color: #fff;
        text-align: center;
        .name {
          margin: 0 30rpx;
          width: calc(100% - 60rpx);
          display: inline-block;
          padding: 22rpx 0;
          background: #00d1b6;
          border-radius: 50rpx;
          font-size: 32rpx;
        }
      }
      .measure {
        display: inline-block;
        width: 100%;
        background: #fff;
        padding-bottom: 30rpx;
        .numWrap {
          margin: 20rpx 30rpx 0;
          background: #fafafa;
          border-radius: 4rpx;
          text-align: center;
          .item {
            display: inline-block;
            vertical-align: middle;
            width: 33.3%;
            margin: 0;
            padding: 10rpx 0 0rpx;
            height: 200rpx;
            .value {
              display: block;
              border: 0;
              width: 100%;
              padding: 20rpx 0 8rpx;
              font-size: 48rpx;
              color: #00d1b6;
              text-align: center;
              background: #fafafa;
            }
            .wraps {
              font-size: 30rpx;
              color: #00d1b6;
              padding: 10rpx 0;
              margin: 0 20rpx;
              text-align: center;
              border-top: 1rpx solid #00d1b6;
              .name {
                display: inline-block;
                vertical-align: middle;
                &:nth-child(1) {
                  margin-right: 8rpx;
                }
              }
            }
          }
        }
      }
      .measureTime {
        margin: 0 32rpx;
        padding: 32rpx 0;
        position: relative;
        .name {
          font-weight: 700;
          color: #222;
          font-size: 30rpx;
        }
        .time {
          color: #222;
          font-size: 30rpx;
          position: absolute;
          top: 50%;
          transform: translateY(-50%);
          right: 0;
          font-weight: 400;
          min-width: 200rpx;
          text-align: right;
          .titles {
            display: inline-block;
            vertical-align: middle;
          }
          .img {
            display: inline-block;
            vertical-align: middle;
            width: 30rpx;
            height: 30rpx;
          }
        }
      }
      .measureDetail {
        margin: 0 32rpx;
        font-size: 26rpx;
        color: #999;
        .item {
          display: block;
          &:nth-child(2) {
            margin-top: 10rpx;
          }
        }
      }
      .content {
        position: relative;
        .contentWrap {
          margin: 0 32rpx;
          .contentItem {
            font-size: 32rpx;
            color: #222;
            margin-top: 32rpx;
          }
          .img {
            display: block;
            width: 100%;
            height: auto;
            margin-top: 30rpx;
          }
        }
        .fixedBtn {
          background: #fff;
          border-top: 1rpx solid #fff;
          position: fixed;
          bottom: 0;
          left: 0;
          width: 100%;
          padding: 24rpx 0;
          padding-bottom: calc(24rpx + constant(safe-area-inset-bottom));
          padding-bottom: calc(24rpx + env(safe-area-inset-bottom));
          color: #fff;
          text-align: center;
          p {
            margin: 0 30rpx;
            padding: 22rpx 0;
            background: #02bcc3;
            border-radius: 50rpx;
            font-size: 32rpx;
          }
        }
      }
    }
    .u-popup__content__close {
      top: 40rpx;
      .uicon-close {
        font-size: 32rpx !important;
        line-height: 32rpx !important;
      }
    }
  }
  ::v-deep
    .u-popup
    .u-slide-up-enter-to
    .u-picker
    .u-picker__view__column
    .u-picker__view__column__item {
    line-height: 34px !important;
  }
  ::v-deep .u-popup .u-slide-up-enter-active {
    border-top-left-radius: 32rpx !important;
    border-top-right-radius: 32rpx !important;
    overflow: hidden;
    .u-toolbar {
      .u-toolbar__wrapper__confirm {
        color: #00d1b6 !important;
      }
    }
  }
  ::v-deep .u-popup .u-slide-up-enter-to .u-picker .u-picker__view {
    height: 400px !important;
  }
}
</style>
